<!-- extends表明此页面继承自 base.html 文件 -->
{% extends "base.html" %}
{% load staticfiles %}
<!-- 写入 base.html 中定义的 title -->
{% block title %}
    讲师详情页
{% endblock title %}
<!-- 写入 base.html 中定义的 content -->
{% block content %}
    <main class="section">
        <div class="columns is-multiline">
            <div class="column is-full">
                <div class="box columns has-background-primary-dark">
                    <div class="column">
                        <div class="card">
                            <div class="card-content has-background-primary">
                                <div class="media">
                                    <div class="media-left">
                                        <figure class="image is-48x48">
                                            <a href="{% url 'org:teacher_detail' teacher.id %}">
                                                <img class="is-rounded"
                                                     src="{{ MEDIA_URL }}{{ teacher.avatar }}"
                                                     alt="Placeholder image">
                                            </a>
                                        </figure>
                                        </a>
                                    </div>
                                    <div class="media-content">
                                        <p class="title is-4">
                                            <a href="{% url 'org:teacher_detail' teacher.id %}"
                                               class="has-text-link-light">
                                                {{ teacher.name }}
                                            </a>
                                        </p>
                                        <p class="subtitle is-6">{{ teacher.characteristic }}</p>
                                    </div>
                                    <div class="media-right">
                                        <a class="has-text-link-light title is-4" id="fav" data-favid="22"
                                           data-fav-type="3">
                                            <strong>
                                                {% if has_fav %}
                                                    已&nbsp;&nbsp;收&nbsp;&nbsp;藏&nbsp;
                                                    <i class="fa fa-star" aria-hidden="true"></i>
                                                {% else %}
                                                    收&nbsp;&nbsp;&nbsp;&nbsp;藏&nbsp;
                                                    <i class="fa fa-star-o" aria-hidden="true"></i>
                                                {% endif %}
                                            </strong>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="card-content columns is-multiline">
                                <div class="column is-full box has-background-primary">
                                    <strong>点击数<i class="fa fa-hand-pointer-o"
                                                  aria-hidden="true"></i>
                                        ：{{ teacher.click_nums }}</strong>
                                </div>
                                <div class="column is-full box has-background-primary">
                                    <strong>收藏数<i class="fa fa-star" aria-hidden="true"></i>
                                        ：{{ teacher.fav_nums }}</strong>
                                </div>
                                <div class="column is-full box has-background-primary">
                                    <strong>课程数<i class="fa fa-book" aria-hidden="true"></i>
                                        ：{{ teacher.course_nums }}</strong>
                                </div>
                                <div class="column is-full box has-background-primary">
                                    <strong>工作年限<i class="fa fa-sun-o" aria-hidden="true"></i>
                                        ：{{ teacher.work_years }}</strong>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="box columns is-multiline">
                    <div class="column is-full box">
                        <div class="column is-full box has-background-primary">
                            <p class="title is-4">所有课程</p>
                        </div>
                        <div class="column is-full box">
                            {# 课程 #}
                            <div class="column is-full">
                                <div class="columns is-multiline">
                                    {% for course in teacher.course_set.all %}
                                        <div class="column is-3-desktop">
                                            <div class="card">
                                                <div class="card-image">
                                                    <a href="{% url 'courses:home' course.id %}">
                                                        <figure class="image is-16by9">
                                                            <img src="{{ MEDIA_URL }}{{ course.image }}"
                                                                 alt="Placeholder image">
                                                        </figure>
                                                    </a>
                                                </div>
                                                <div class="card-content has-background-primary">
                                                    <div class="media">
                                                        <div class="media-content has-text-centered">
                                                            {# 课程名 #}
                                                            <p class="title is-3 has-text-white">
                                                                <a href="{% url 'course:home' course.id %}"
                                                                   class="has-text-link-light">
                                                                    {{ course.name }}
                                                                </a>
                                                            </p>
                                                            <hr>
                                                            {# 课程信息 #}
                                                            <div class="columns is-multiline">
                                                                {# 课程时长 #}
                                                                <div class="column is-full">
                                                                <span>
                                                                    <strong class="has-text-white">
                                                                        课&nbsp;程&nbsp;时&nbsp;长
                                                                        <i class="fa fa-clock-o" aria-hidden="true"></i>
                                                                        ：{{ course.learn_times }}
                                                                    </strong>
                                                                </span>
                                                                </div>
                                                                {# 学生数 #}
                                                                <div class="column is-full">
                                                                <span>
                                                                    <strong class="has-text-white">
                                                                        学&nbsp;生&nbsp;数
                                                                        <i class="fa fa-address-card"
                                                                           aria-hidden="true"></i>
                                                                        ：{{ course.students }}
                                                                    </strong>
                                                                </span>
                                                                </div>
                                                                {# 收藏数 #}
                                                                <div class="column is-full">
                                                                <span>
                                                                    <strong class="has-text-white">
                                                                        收&nbsp;藏&nbsp;数
                                                                        <i class="fa fa-star" aria-hidden="true"></i>
                                                                        ：{{ course.fav_nums }}
                                                                    </strong>
                                                                </span>
                                                                </div>
                                                                {# 难度 #}
                                                                <div class="column is-full">
                                                                <span>
                                                                    <strong class="has-text-white">
                                                                        难&nbsp;&nbsp;度
                                                                        <i class="fa fa-google-wallet"
                                                                           aria-hidden="true"></i>
                                                                        ：{{ course.get_degree_display }}
                                                                    </strong>
                                                                </span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </main>
{% endblock %}



{% block content_js %}
    <script type="text/javascript">
        function add_fav(current_elem, fav_id, fav_type) {
            $.ajax({
                cache: false,
                type: "POST",
                url: "{% url 'op:fav' %}",
                data: {'fav_id': fav_id, 'fav_type': fav_type},
                async: true,
                beforeSend: function (xhr, settings) {
                    xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
                },
                success: function (data) {
                    if (data.status == 'fail') {
                        if (data.msg == '用户未登录') {
                            window.location.href = "{% url 'login' %}";
                        } else {
                            alert(data.msg)
                        }

                    } else if (data.status == 'success') {
                        {#current_elem.text(data.msg)#}
                        alert(data.msg)
                        window.location.reload()
                    }
                },
            });
        }

        $(document).ready(function () {
            $('#fav').on('click', function () {
                add_fav($(this), {{ teacher.id }}, 3);
            });
        });
    </script>
{% endblock content_js %}
